<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <% include include/link %>
</head>
<body>
    <div class="container-fluid widget-stage">
        <h1 class="widget-stage-title">Douyou8UI 项目通用组件库</h1>
        <p class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现。</p>
        <section class="widget-item">
            <div class="widget-item-title">基础按钮</div>
            <div class="widget-item-cnt">
                <a href="javascript:;" class="btn btn-default">Link</a>
                <button type="button" class="btn btn-default">Button</button>
                <input type="button" class="btn btn-default" value="Input">
                <input class="btn btn-default" type="submit" value="Submit">
            </div>
        </section>
        <section class="widget-item">
            <div class="widget-item-title">有颜色的按钮</div>
            <div class="widget-item-cnt">
                <div>
                    <button type="button" class="btn btn-default">主要样式</button>
                    <button type="button" class="btn btn-primary">主要样式</button>
                    <button type="button" class="btn btn-info">一般信息</button>
                    <button type="button" class="btn btn-success">成功按钮</button>
                    <button type="button" class="btn btn-warning">警告按钮</button>
                    <button type="button" class="btn btn-danger">错误按钮</button>
                </div>
                <br />
                <div>
                    <button type="button" class="btn btn-default btn-ghost">主要样式</button>
                    <button type="button" class="btn btn-primary btn-ghost">主要样式</button>
                    <button type="button" class="btn btn-info btn-ghost">一般信息</button>
                    <button type="button" class="btn btn-success btn-ghost">成功按钮</button>
                    <button type="button" class="btn btn-warning btn-ghost">警告按钮</button>
                    <button type="button" class="btn btn-danger btn-ghost">错误按钮</button>
                </div>
                <br />
                <div>
                    <button type="button" class="btn btn-default btn-dashed">主要样式</button>
                    <button type="button" class="btn btn-primary btn-dashed">主要样式</button>
                    <button type="button" class="btn btn-info btn-dashed">一般信息</button>
                    <button type="button" class="btn btn-success btn-dashed">成功按钮</button>
                    <button type="button" class="btn btn-warning btn-dashed">警告按钮</button>
                    <button type="button" class="btn btn-danger btn-dashed">错误按钮</button>
                </div>
            </div>
        </section>
        <section class="widget-item">
            <div class="widget-item-title">禁用状态按钮</div>
            <div class="widget-item-cnt">
                <a href="javascript:;" class="btn btn-primary" disabled="disabled">Link按钮</a>
                <button type="button" class="btn btn-primary" disabled="disabled">块级按钮</button>
                <button type="button" class="btn btn-primary btn-ghost" disabled="disabled">块级按钮</button>
                <button type="button" class="btn btn-defaylt disabled">块级按钮</button>
            </div>
        </section>
        <section class="widget-item">
            <div class="widget-item-title">图标状态按钮</div>
            <div class="widget-item-cnt">
                <button type="button" class="btn btn-defaylt btn-primary">
                    <i class="glyphicon glyphicon-ok"></i>
                    <span>块级按钮</span>
                </button>
            </div>
        </section>
        <section class="widget-item">
            <div class="widget-item-title">尺寸按钮</div>
            <div class="widget-item-cnt">
                <button type="button" class="btn btn-primary btn-lg">大按钮</button>
                <button type="button" class="btn btn-primary">默认尺寸</button>
                <button type="button" class="btn btn-primary btn-sm">小按钮</button>
                <button type="button" class="btn btn-primary btn-xs">超小按钮</button>
            </div>
        </section>
        <section class="widget-item">
            <div class="widget-item-title">块级按钮</div>
            <div class="widget-item-cnt">
                <button type="button" class="btn btn-primary btn-block">块级按钮</button>
                <button type="button" class="btn btn-defaylt btn-block">块级按钮</button>
            </div>
        </section>
    </div>
</body>
</html>